<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>

  <title>JamieLottering/DropKick @ GitHub</title>
  <link rel="stylesheet" href="example/example.css" type="text/css">
  <link rel="stylesheet" href="dropkick.css" type="text/css">
  <link href='http://fonts.googleapis.com/css?family=Carter+One&v1' rel='stylesheet' type='text/css'>
  
  <style type="text/css">
    /* Two custom themes */
    .dk_theme_orange {
      background: #ffffff; /* Old browsers */
      background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera11.10+ */
      background: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
      background: linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
    }
      .dk_theme_orange .dk_options a:hover,
      .dk_theme_orange .dk_option_current a {
        background-color: #E15A01;
        border-bottom-color: #604A42;
        color: #fff;
        text-shadow: #604A42 0 1px 0;
      }
      .dk_theme_orange .dk_toggle,
      .dk_theme_orange.dk_open .dk_toggle {
        background-color: transparent;
      }
      .dk_theme_orange.dk_focus .dk_toggle{
        box-shadow: 0 0 5px #E15A01;
        -moz-box-shadow: 0 0 5px #E15A01;
        -webkit-box-shadow: 0 0 5px #E15A01;
      }

    .dk_theme_black {
      background: #aebcbf; /* Old browsers */
      background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Opera11.10+ */
      background: -ms-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* IE10+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */
      background: linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* W3C */
    }
      .dk_theme_black .dk_toggle,
      .dk_theme_black.dk_open .dk_toggle {
        background-color: transparent;
        background-image: url('images/dk_arrows_white.png');
        color: #fff;
        text-shadow: none;
      }
      .dk_theme_black .dk_options a {
        background-color: #333;
        color: #fff;
        text-shadow: none;
      }
        .dk_theme_black .dk_options a:hover,
        .dk_theme_black .dk_option_current a {
          background-color: #E15A01;
          color: #fff;
          text-shadow: #604A42 0 1px 0;
        }
  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="jquery.dropkick-1.0.0.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
    $(function () {
      $('.default').dropkick();

      $('.black').dropkick({
        theme : 'black'
      });

      $('.change').dropkick({
        change: function (value, label) {
          alert('You picked: ' + label + ':' + value);
        }
      });

      $('.custom_theme').dropkick({
        theme: 'black',
        change: function (value, label) {
          $(this).dropkick('theme', value);
        }
      });

      $('.dk_container').first().focus();
    });
  </script>
</head>

<body>
  <a href="http://github.com/JamieLottering/DropKick"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 15;" src="https://d3nwyuy0nl342s.cloudfront.net/img/4c7dc970b89fd04b81c8e221ba88ff99a06c6b61/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub"></a>

  <div class="header">
    <div class="header_inner group">
      <h1>DropKick.js <span>Examples you can use.</span></h1>
    </div>
  </div>
  <div class="content">
    <div class="examples part">
      <div class="example">
        <h2>Default Options</h2>
        <fieldset>
          <form action="#" method="post" accept-charset="utf-8" class="example_form">
            <select name="country" class="default" tabindex="2">
              <option value="">Try Me!</option>
              <option value="AU">Australia</option>
              <option value="CA">Canada</option>
              <option value="DE">Germany</option>
              <option value="JP">Japan</option>
              <option value="GB">United Kingdom</option>
              <option value="US">United States</option>
            </select>
            <select name="state" class="default" tabindex="3">
              <option value="" selected="selected">Try Me, Too!</option>
              <option value="AL">Alabama</option>
              <option value="AK">Alaska</option>
              <option value="AZ">Arizona</option>
              <option value="AR">Arkansas</option>
              <option value="CA">California</option>
              <option value="CO">Colorado</option>
              <option value="CT">Connecticut</option>
              <option value="DE">Delaware</option>
              <option value="FL">Florida</option>
              <option value="GA">Georgia</option>
              <option value="HI">Hawaii</option>
              <option value="ID">Idaho</option>
              <option value="IL">Illinois</option>
              <option value="IN">Indiana</option>
              <option value="IA">Iowa</option>
              <option value="KS">Kansas</option>
              <option value="KY">Kentucky</option>
              <option value="LA">Louisiana</option>
              <option value="ME">Maine</option>
              <option value="MD">Maryland</option>
              <option value="MA">Massachusetts</option>
              <option value="MI">Michigan</option>
              <option value="MN">Minnesota</option>
              <option value="MS">Mississippi</option>
              <option value="MO">Missouri</option>
              <option value="MT">Montana</option>
              <option value="NE">Nebraska</option>
              <option value="NV">Nevada</option>
              <option value="NH">New Hampshire</option>
              <option value="NJ">New Jersey</option>
              <option value="NM">New Mexico</option>
              <option value="NY">New York</option>
              <option value="NC">North Carolina</option>
              <option value="ND">North Dakota</option>
              <option value="OH">Ohio</option>
              <option value="OK">Oklahoma</option>
              <option value="OR">Oregon</option>
              <option value="PA">Pennsylvania</option>
              <option value="RI">Rhode Island</option>
              <option value="SC">South Carolina</option>
              <option value="SD">South Dakota</option>
              <option value="TN">Tennessee</option>
              <option value="TX">Texas</option>
              <option value="UT">Utah</option>
              <option value="VT">Vermont</option>
              <option value="VA">Virginia</option>
              <option value="WA">Washington</option>
              <option value="WV">West Virginia</option>
              <option value="WI">Wisconsin</option>
              <option value="WY">Wyoming</option>
            </select>
            <p><script src="https://gist.github.com/1062688.js?file=dropkick_example_default.js"></script></p>
          </form>
        </fieldset>
      </div>

      <div class="example">
        <h2>Custom 'change' callback</h2>
        <fieldset>
          <form action="#" method="post" accept-charset="utf-8" class="example_form">
            <select name="color" class="change" tabindex="4">
              <option value="">Please select a color</option>
              <option value="#0084c7">Blue</option>
              <option value="#E15A01">Orange</option>
              <option value="#604A42">Brown</option>
            </select>
            <div style="clear: both;"></div>
            <script src="https://gist.github.com/1062688.js?file=dropkick_example_callback.js"></script>
          </form>
        </fieldset>
      </div>

      <div class="example">
        <h2>Creating custom themes</h2>
        <fieldset>
          <form action="#" method="post" accept-charset="utf-8" class="example_form">
            <select name="theme" class="custom_theme" tabindex="5">
              <option value="">Pick a theme. Any theme</option>
              <option value="default">Default Theme</option>
              <option value="black" >Dark Gloss</option>
              <option value="orange">Light Gloss</option>
            </select>
            <div style="clear: both;"></div>
            <script src="https://gist.github.com/1062688.js?file=custom_theme.css"></script>
            <script src="https://gist.github.com/1062688.js?file=dropkick_example_theme.js"></script>
          </form>
        </fieldset>
      </div>
    </div>
  </div>

</body>
</html>
